<template>
  <!--头部-->
  <div class="top" id="top">
    <!--头部bar-->
    <!--头部bar-->
    <div class="top-bar">
      <div class="w1230 top-bar-main">
        <ul>
          <li >
            <RouterLink v-if="loginUser==null" class="login" to="/user/login">登录</RouterLink>
            <span v-if="loginUser!=null"> {{loginUser.userName}} <a v-if="loginUser!=null" href="" @click="logout">退出</a > </span>
          </li>

          <li>
            <RouterLink v-if="loginUser==null" class="register" to="/user/register">注册</RouterLink>
          </li>
          <li v-if="loginUser!=null">
            <router-link to="/order">
              <i class="fa fa-file-text-o"></i>我的订单
            </router-link>
          </li>

          <li v-if="loginUser!=null">
            <router-link to="ShoppingCart">
              <i class="fa fa-shopping-cart"></i>购物车
            </router-link>
          </li>

        </ul>
      </div>
    </div>
    <!--logo+搜索-->
    <div class="top-header w1230 clear-float">
      <RouterLink to="/" target="_blank" class="logo">
        <img src="../assets/img/logo.png"/>
      </RouterLink>
      <div class="top-header-right">
        <!--搜索框-->
        <div class="search clear-float">
          <input type="text"  v-model="editProductQuery.productName" placeholder="牛奶" class="search-txt"/>
          <button class="search-btn" @click="onSearch()">搜索</button>
<!--          <button class="clear-btn" @click="clearSearch">取消</button>-->
        </div>

        <!--热搜-->
        <p class="hotkey">
          <a href="#">牛奶</a>
          <a href="#">牛仔裤</a>
          <a href="#">巧克力</a>
          <a href="#">月饼</a>
          <a href="#">抽纸</a>
          <a href="#">狗粮</a>
          <a href="#">奶粉</a>
          <a href="#">护发素</a>
          <a href="#">进口食品</a>
          <a href="#">良品铺子</a>
        </p>
      </div>
    </div>
  </div>
  <!--分类+banner-->
  <div v-if="!isSearchMode" >
    <div class="main w1230 clear-float">
    <!--商品分类-->
    <div class="classify">
      <ul >
        <li v-for="type in productTypeList" :key="type.id">
          <h3><RouterLink to="/classify">{{ type.productTypeName }}</RouterLink></h3>
        </li>
      </ul>
    </div>
    <!--轮播-->
    <div class="banner" id="main">
      <ul id="pic">
        <li v-for="(image, index) in CarouselFigureList" :key="index" :style="{transform: `translateX(-${currentSlide * 100}%)`}">
          <a href="#">
            <img :src="image.url" :alt="image.alt" width="1020px" height="360px"/>
          </a>
        </li>
      </ul>
      <ul class="banner-btn" id="list">
        <li v-for="(item, index) in CarouselFigureList" :key="index"
            :class="{'on': currentSlide === index}"
            @mouseenter="goToSlide(index)">
        </li>
      </ul>
    </div>
   </div>
  <!--新品+排行榜-->

  <div class="new-rank w1230 clear-float">
    <a href="#" class="new-img"><img src="../assets/img/new.jpg" width="267px" height="400px"/></a>
    <!--新品-->
    <div class="new">
      <h3 class="title">新品</h3>
      <div class="new-list">
        <ul >
          <li v-for="createtime in productTime" :key="createtime.id">
            <RouterLink :to="'/goodsDetail/' + createtime.id">
              <img
                  style="width: 120px; height: 100px;"
                  :src="createtime.productImage" :alt="createtime.productName">
              <p>{{ createtime.productName }}</p>
            </RouterLink>
          </li>
        </ul>
      </div>
    </div>
    <!--排行榜-->
    <div class="rank">
      <h3 class="title">排行榜</h3>
      <div class="rank-list">
        <ul>
          <li>
            <a href="#">
              <span class="rank-icon1">1</span>
              <img src="../assets/img/rank01.jpg" alt="" width="90px" height="90px"/>
              <p>口水族 休闲零食</p>
            </a>
          </li>
          <li>
            <a href="#">
              <span class="rank-icon2">2</span>
              <img src="../assets/img/rank02.jpg" alt="" width="90px" height="90px"/>
              <p>欢乐家 生榨椰子汁</p>
            </a>
          </li>
          <li>
            <a href="#">
              <span class="rank-icon3">3</span>
              <img src="../assets/img/detail/big-detail.jpg" alt="" width="90px" height="90px"/>
              <p>盼盼 法式面包 </p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="../assets/img/rank04.jpg" alt="" width="90px" height="90px"/>
              <p>满199减120三只松鼠</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="../assets/img/rank05.jpg" alt="" width="90px" height="90px"/>
              <p>满199减120_百草味</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="../assets/img/rank06.jpg" alt="" width="90px" height="90px"/>
              <p>三只松鼠方便食品</p>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <!--侧导航栏-->
  <div class="c-nav">
    <ul>
      <li><a href="#global-foot" class="nav-g">全球进口</a></li>
      <li><a href="#cloth" class="nav-c">服装服饰</a></li>
      <li><a href="#mod" class="nav-m">护肤美妆</a></li>
      <li><a href="#book" class="nav-b">图书学习</a></li>
      <li><a href="#top" class="nav-top">返回顶部</a></li>
    </ul>
  </div>
  <!--全球进口-->
    <div class="global-foot w1230" id="global-foot">
      <RouterLink :to="'/classify'" class="h-title">全球进口</RouterLink>
      <div class="global-list">
        <ul class="clear-float">
          <!-- 非搜索模式下显示原始列表的一部分 -->
          <li v-for="product in productList.slice(0,5)" :key="product.id">
            <RouterLink :to="'/goodsDetail/' + product.id">
              <p>{{ product.productName }}</p>
            <img
                style="width: 150px; height: 150px;"
                :src="product.productImage" :alt="product.productName">
            </RouterLink>
          </li>
        </ul>
      </div>
    </div>
  <!--服装服饰-->
  <div class="cloth w1230" id="cloth">
    <RouterLink :to="'/classify'" class="h-title">服装服饰</RouterLink>
    <div class="cloth-list">
      <ul class="clear-float">
        <li v-for="userTypeFuShi in productListFuShi.slice(0,12)" :key="userTypeFuShi.id">
          <!-- 显示产品图片 -->
          <RouterLink :to="'/goodsDetail/' + userTypeFuShi.id">
          <div class="c-img">
          <img
              style="width: 180px; height: 180px;"
              :src="userTypeFuShi.productImage"
              :alt="userTypeFuShi.productName"
          >
          </div>
          <!-- 显示产品名称 -->
          <p class="c-title" >{{ userTypeFuShi.productName }}</p>
          <span class="c-price">￥{{userTypeFuShi.price}}.00</span>
          </RouterLink>
        </li>
      </ul>
    </div>
  </div>
  <!--护肤美妆-->
  <div class="mod w1230" id="mod">
    <RouterLink :to="'/classify'" class="h-title">护肤美妆</RouterLink>
    <div class="mod-list">
      <ul class="clear-float">
        <li v-for="userProductMeiZhuang in productListMeiZhuang.slice(0,5)" :key="userProductMeiZhuang.id">
          <RouterLink :to="'/goodsDetail/' + userProductMeiZhuang.id">
        <div class="c-img">
          <img
            :src="userProductMeiZhuang.productImage"
            :alt="userProductMeiZhuang.productNmae"
          >
        </div>
          <p class="c-title">{{userProductMeiZhuang.productName}}</p>
          <span class="c-price">￥{{userProductMeiZhuang.price}}.00</span>
          </RouterLink>
        </li>
      </ul>
    </div>
  </div>
  <!--图书学习-->
  <div class="book w1230" id="book">
    <RouterLink :to="'/classify'" class="h-title">图书学习</RouterLink>
    <div class="book-list">
      <ul class="clear-float">
        <li v-for="userProductBook in productListBook.slice(0,12)" :key="userProductBook.id">
          <RouterLink :to="'/goodsDetail/' + userProductBook.id ">
          <div class="c-img">
            <img
                style="width: 180px; height: 180px;"
                :src="userProductBook.productImage"
                :alt="userProductBook.productNmae"
            >
          </div>

          <p class="c-title">{{userProductBook.productName}}</p>
          <span class="c-price">￥{{userProductBook.price}}.00</span>
          </RouterLink>
        </li>
      </ul>
    </div>
  </div>
  <!--脚注-->
  <div class="footer">
     <p class="w1230">
      <a href="#">关于爱购</a>
      <a href="#">合作伙伴</a>
      <a href="#">营销中心</a>
      <a href="#">廉正举报</a>
      <a href="#">联系客服</a>
      <a href="#">开发平台</a>
      <a href="#">诚征英才</a>
      <a href="#">联系我们</a>
      <a href="#">网站地图</a>
      <a href="#">知识产权</a><span>|</span>
      <span>&copy;2018-2020 igo.com 版权所有</span>
     </p>
   </div>
  </div>
  <div :class="{ 'horizontal-list': isSearchMode }" class="clear-float">
    <!-- 搜索模式下显示搜索结果 -->
    <li v-for="product in searchResults" :key="product.id">
      <RouterLink :to="'/GoodsDetail/' + product.id">
      <img :src="product.productImage" :alt="product.productName">
      </RouterLink>
      <p>{{ product.productName }}</p>
      <span>￥{{ product.price }}</span>
    </li>
  </div>
</template>
<script>
import {doDelete, doGet, doPost, doPut} from "../http/httpRequest.js";
import {messageConfirm, messageTip} from "../util/util.js";

export default {
  name: "indexView",
  data(){
    return{
      productTypeList:[],
      productList:[],
      dialogVisible:[],
      CarouselFigureList:[],
      currentSlide: 0,
      loginUser: {},
      productListFuShi:[],
      productListMeiZhuang:[],
      productListBook:[],
      editProductQuery:{},
      searchResults: [],
      isSearchMode: false,
      isEmptySearchResult: false,
      productTime:{}
    }
  },

  mounted() {
    this.loadProductTypeList(1);
    this.loadProductList();
    this.loadCarouselFigureList(1);
    this.loadProductListFuShi();
    this.loadProductListMeiZhuang();
    this.loadProductListBook();
    this.localProductTime()
    // this.loadProductListAll(1);
    setInterval(() => {
      this.changeSlide(1);
    }, 3000);
    this.loginUser = JSON.parse(localStorage.getItem("user"))
    console.log(this.loginUser)
  },
  methods:{
    logout(){
      this.loginUser=null
      localStorage.removeItem("user");
      this.$router.push("/");
    },
    //分类导航栏
    loadProductTypeList(current) {
      doGet("/user/ProductType", {
        current: current
      }).then((resp) => {
        console.log(resp); // 打印完整的响应对象
        if (resp.data.code === 200) {
          this.productTypeList = resp.data.data.list;
        }
      });
    },
    //全球进口商品
    loadProductList() {
      doGet("/user/product/userProductType").then((resp) => {
        console.log(resp);
        if (resp.data.code === 200) {
          this.productList = resp.data.data;
          console.log(this.productList)
        }
      })
    },
    //服饰商品
    loadProductListFuShi(){
      doGet("/user/product/userProductTypeFuShi").then((resp) => {
        console.log(resp);
        if (resp.data.code === 200) {
          this.productListFuShi = resp.data.data;
          console.log(this.productListFuShi)
        }
      })
    },
    //美妆商品
    loadProductListMeiZhuang(){
      doGet("/user/product/userProductTypeMeiZhuang").then((resp) => {
        console.log(resp);
        if(resp.data.code === 200) {
          this.productListMeiZhuang = resp.data.data;
          console.log(this.productListMeiZhuang)
        }
      })
    },
    //书籍商品
    loadProductListBook(){
      doGet("/user/product/userProductTypeBook").then((resp) => {
        console.log(resp);
        if(resp.data.code === 200){
          this.productListBook = resp.data.data;
          console.log(this.productListBook)
        }
      })
    },
    loadCarouselFigureList(current) {
      doGet("/user/carouselFigure", {
        current: current
      }).then((resp) => {
        console.log(resp)
        if (resp.data.code === 200) {
          this.CarouselFigureList = resp.data.data.list;
          this.currentSlide = 0;
        }
      });
    },
    changeSlide(n) {
      const totalSlides = this.CarouselFigureList.length;
      this.currentSlide = (this.currentSlide + n + totalSlides) % totalSlides;
    },
    goToSlide(index) {
      this.currentSlide = index;
    },
      loadProductListAll(current) {
        doGet("/user/product", {
          current: current,
          productName: this.editProductQuery.productName
        }).then((resp) => {
          if (resp.data.code === 200) {
            this.searchResults = resp.data.data.list;
            if (this.searchResults.length === 0) {
              // 设置标志位，指示搜索结果为空
              messageTip('没有找到该商品', 'error');
              this.isEmptySearchResult = true;
            } else {
              // 有搜索结果，重置标志位
              this.isEmptySearchResult = false;
            }
            this.pageSize = resp.data.data.pageSize;
            this.total = resp.data.data.total;
          }
        });
      },
    onSearch() {
      if (this.editProductQuery.productName.trim() === '') {
        // 可以显示一个消息提示用户搜索框不能为空
        console.log('搜索框不能为空');
        // 或者使用Element UI的Message组件来提示用户
        messageTip(
           '搜索框不能为空',
          'error'
        );
      } else {
        this.loadProductListAll(1);
        this.isSearchMode = true;
      }
    },
    // clearSearch() {
    //   this.editProductQuery.productName = ''; // 清空搜索输入框
    //   this.searchResults = []; // 清空搜索结果
    //   this.isSearchMode = false; // 切换回正常模式
    // },
    goToDetail(productId) {
      this.$router.push({ name: 'ProductDetail', params: { productId: productId } });
    },
    localProductTime(){
      doGet("/user/product/createTime").then((resp) => {
        console.log(resp);
        if(resp.data.code === 200){
          this.productTime = resp.data.data;
          console.log(this.productTime)
        }
      })
    }
  },

}
</script>
<style scoped>

@import '../assets/css/reset.css';
@import "../assets/css/top.css";
@import "../assets/css/index.css";
@import "../assets/css/footer.css";
@import "../assets/css/font-awesome-4.7.0/Font-Awesome-master/css/font-awesome.min.css";
@import '../assets/css/buyerTrade.css';
@import '../assets/css/classify.css';
@import '../assets/css/deliverAddress.css';
@import '../assets/css/goodsDetail.css';
@import '../assets/css/login.css';
@import '../assets/css/shoppingCart.css';

.horizontal-list {
  display: flex;       /* 启用 Flexbox 布局 */
  flex-wrap: wrap;     /* 允许换行，如果项目超出容器宽度 */
  justify-content: space-between; /* 两端对齐，项目之间间隔均匀分布 */
  list-style: none;   /* 移除列表的默认标记（如圆点） */
  padding: 0;       /* 移除内边距 */
  margin: 0;       /* 移除外边距 */
}

.horizontal-list li {
  flex: 0 1 auto; /* 允许列表项根据内容调整大小，但不超过容器宽度 */
  margin-right: 10px; /* 列表项之间的右边距 */
}
</style>